<html>

<head>
    <meta charset="utf-8">
    <meta name="author" content="xsl">
    <script src="jquery-3.1.1.js"></script>
    <title></title>
    <style>
         *{
             padding: 0;
             margin: 0;
         }
        .top {
            background-color: #666;
            display: flex;
            width: 800px;
            color: white;
            list-style: none;
            height: 50px;
            font-size: 20px;
            position: relative;
            margin: 20px auto;
        }
        
        .top>li {
            width: 200px;
            text-align: center;
            line-height: 50px;
        }
        .bottom{
            position: relative;
            margin: 0 auto;
            display: flex;
            font-size: 20px;
            color: #666;
            width: 800px;
            margin-top: -20px;  
        }
        .bottom ul{
            position: absolute;
            width: 120px;
            border: 1px solid #888;
            list-style: none;
            left: 35px;
            text-align: center;
            border-top: none;
            display: none;
            box-sizing: border-box;
            /*padding: 0 10px;*/
        }
        .bottom ul:nth-of-type(2){
             left: 240px;
        }
        .bottom ul:nth-of-type(3){
            left: 440px;
        }
        .bottom ul:nth-of-type(4){
            left: 645px;
        }
        .bottom ul li{
           margin: 15px auto;
        }
       .bottom .lucky{
            display: block;
        }
        .bottom ul .border{
            /*border-bottom: 1px solid #888;*/
            color: orange;
            text-decoration: underline;
        }
    </style>
</head>

<body>
    <div class="xiaoshi">
    <ul class="top">
        <li>公司简介</li>
        <li>产品介绍</li>
        <li>联系我们</li>
        <li>人才招聘</li>
    </ul>
    <div class="bottom">
        <ul>
            <li>概况介绍</li>
            <li>发展历史</li>
            <li>公司实力</li>
        </ul>
        <ul>
            <li>软件开发</li>
            <li>软件教育</li>
            <li>天使投资</li>
        </ul>
        <ul>
            <li>公司地址</li>
            <li>联系方式</li>
            <li>投资加盟</li>
        </ul>
        <ul>
            <li>IOS招聘</li>
            <li>HTML5招聘</li>
            <li>PHP招聘</li>
        </ul>
    </div>
    </div>
</body>

</html>
<script>
    //  获取索引值,然后添加类名
    $('.top li').mouseover(function(){
       $('.bottom ul').eq($(this).index()).addClass('lucky').siblings().removeClass('lucky')
    })
    // 鼠标离开清除类名
    $('.xiaoshi').mouseleave(function(){
        $('.bottom ul').removeClass('lucky')
        $('.bottom ul li').removeClass('border')
    })
    // 鼠标放上去显示下边框线
    $('.bottom ul li').mouseover(function(){
        // console.log(this);
        $(this).addClass('border').siblings().removeClass('border')
    })

</script>